
<script setup>
	
	import port from './lib/port';
	import store from './lib/store';
	import { reactive, ref } from 'vue';
	import useFunction from './hook/useFunction';
	import c_round from './components/round.vue';
	import { onLoad, onShow } from "@dcloudio/uni-app";


	/** 词汇相关共享数据 */
	const storeData = store();
	
	/** 工具函数 */
	const toolFunction = useFunction();

	/** 课程列表 */
	const courselist = reactive(storeData.course.list);
	
	/** 课程索引 */
	const courseIndex = ref(storeData.course.index);

	/** 课程详情 */
	const detailData = ref({});
	
	/** 课程 id */	
	const courseId = ref(storeData.query.courseId);

	/** 进入页面时 */
	onShow(async () => {
		detailData.value = await port.getCourseDetail_api({ id: storeData.query.learnId });
		getNumberEvent();
	});

	
	/** 词汇统计 */
	const numberCount = reactive({
		totalWordsNum: 0,
		todayWordsNum: 0,
		todayReviewNum: 0
	});
	
	/** 九宫格统计 */
	const boxWordCount = ref([]);

	/** 切换课程时 */
	async function cousrChange(data) {
		courseIndex.value = parseInt(data.detail.value);
		await port.edirlearnCourse({ id: storeData.query.learnId || courseId.value, courseId: courselist[courseIndex.value].id });
		detailData.value = await port.getCourseDetail_api({ id: storeData.query.learnId || courseId.value });
		getNumberEvent();
	};

	/** 获取统计数量 */
	async function getNumberEvent() {
		const res = await port.getWordsCount_api({ courseId: detailData.value?.course?.id, learnType: storeData.query.learnType });
		const list = await port.getWordsCountRecord_api({ courseId: detailData.value?.course?.id, learnType: storeData.query.learnType });
		numberCount.todayWordsNum = res.today;
		
		let arr = [];
		let todayReviewNum = 0;
	  
		list.forEach(item => arr[item.box - 1] = item.totalWords);
		for (let i = 0; i <= 7; i++) {
			if (!arr[i]) arr[i] = 0;
			if (i <= 6) todayReviewNum += arr[i];
		};
		
		boxWordCount.value = arr;
		numberCount.todayReviewNum = todayReviewNum;
		numberCount.totalWordsNum = arr[7];
	};

	/** 去学习 */
	function goLearn(box) {
		const number = boxWordCount.value[box - 1] || 0;
		
		/** 设置参数 */
		storeData.setQuery({ box, learnId: storeData.query.learnId || detailData.value.id });
		let url = '/pages/course/word/page';
		if (box > 0 && number == 0) return false;
		else if (box > 0) {
			url = '/pages/course/word/fuxi';
		};
		
		uni.redirectTo({
			url
		});
	};

	/** 开始学习 */
	function begin(box) {
		if(!numberCount.todayReviewNum && box === 9) {
			toolFunction.toast('今日无可复习的单词~');
			return false;
		};
		
		/** 设置参数 */
		storeData.setQuery({ box, learnId: storeData.query.learnId || detailData.value.id });
		uni.redirectTo({
			url: '/pages/course/word/page'
		});
	};
	
	
</script>

<template>
	<view class="containerbox">
		<uv-navbar title="上课" auto-back placeholder bg-color="#4d6d8a" left-icon-color="#fff" title-style="color:#fff"/>
		
		<view class="pt-40">
			<view class="text-white text-26 flex items-center pl-50">
				<picker mode="selector" :range="courselist" range-key="name" @change="cousrChange">
					<view class="text-32">{{ courselist[courseIndex].name }}</view>
				</picker>
				
				<uni-icons type="right" size="36rpx" color="#fff" />
			</view>
		</view>
		
		<view class="containerbox px-50 items-center justify-center">
			<c_round :list="boxWordCount" @learn="goLearn" />
			
			<view class="mt-100 text-26 text-white flex">
				<view class="mx-30"><text class="text-white ml-10 flex justify-center text-40 font-weight-600">{{ numberCount.todayWordsNum }}</text>今日识词</view>
				<view class="mx-30"><text class="text-white ml-10 flex justify-center text-40 font-weight-600">{{ numberCount.todayReviewNum }}</text>今日待复习</view>
				<view class="mx-30"><text class="text-white ml-10 flex justify-center text-40 font-weight-600">{{ numberCount.totalWordsNum }}</text>累计识词</view>
			</view>
		</view>
		
		<view class="flex items-center justify-between bottombox">
			<view class="btn bgc-warning" @click="begin(9)">开始复习</view>
			<view class="btn bgc-primary" @click="begin(0)">继续学习</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	@import "./style/common.scss";
</style>